{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import split with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_image %}{{ static('img/firefox/browsers/mobile/focus/page-image.png') }}{% endblock %}
{% block page_favicon %}{{ static('img/favicons/firefox/browser/focus/favicon.ico') }}{% endblock %}
{% block page_favicon_large %}{{ static('img/favicons/firefox/browser/focus/favicon-196x196.png') }}{% endblock %}
{% block page_ios_icon %}{{ static('img/favicons/firefox/browser/focus/apple-touch-icon.png') }}{% endblock %}

{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
{% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}
{% set android_url = play_store_url('focus', 'firefox-browsers-mobile-focus') %}
{% set ios_url = app_store_url('focus', 'firefox-browsers-mobile-focus') %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('firefox-browsers-mobile') }}

  {% if show_firefox_app_store_banner %}
    {{ css_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}

{% block page_title %}{{ ftl('mobile-focus-firefox-focus-the-privacy') }}{% endblock %}
{% block page_desc %}{{ ftl('mobile-focus-firefox-focus-is-your-dedicated-v2') }}{% endblock %}

{% block body_class %}{{ super() }} mobile-focus{% endblock %}

{% block page_banner %}
  {% if show_firefox_app_store_banner %}
    {% include 'includes/banners/mobile/focus-app-store.html' %}
  {% endif %}
{% endblock %}

{% block site_header %}
  {% with hide_nav_download_button=True %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
<main>
  {% call split(
    block_class='mzp-l-split-center-on-sm-md c-page-header',
    media_class='mzp-l-split-h-center',
    media_include='firefox/browsers/mobile/includes/s2d-focus.html',
    media_after=True
  ) %}
    <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-{% if LANG=='de' %}klar{% else %}focus{% endif %}">{{ ftl('mobile-focus-firefox-focus') }}</div>
    <h1 class="mzp-u-title-lg">{{ ftl('mobile-focus-simply-private-mobile') }}</h1>
    <p class="c-tagline">{{ ftl('mobile-focus-firefox-focus-dedicated-with-v2') }}</p>
    <p>{{ ftl('mobile-focus-firefox-focus-is-available') }}</p>

    <ul class="mobile-download-buttons">

      <li class="android">
        {{ google_play_button(href=android_url, id='playStoreLink-primary') }}
      </li>
      <li class="ios">
        {{ apple_app_store_button(href=ios_url, id='appStoreLink-primary') }}
      </li>
    </ul>
  {% endcall %}

  {% call split(
    image=resp_img(
      url='img/firefox/browsers/mobile/focus/disappear-your-history.svg',
      optional_attributes={
        'class': 'mzp-c-split-media-asset'
      }
    ),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-focus-delete-your-history') }}</h3>
    <p>{{ ftl('mobile-focus-easily-erase-your') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img(
      url='img/firefox/browsers/mobile/focus/take-private-mode-to-the-next-level.svg',
      optional_attributes={
        'class': 'mzp-c-split-media-asset'
      }
    ),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl',
  ) %}
    <h3>{{ ftl('mobile-focus-take-private-mode') }}</h3>
    <p>{{ ftl('mobile-focus-private-browsing-on-v2') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img(
      url='img/firefox/browsers/mobile/focus/tracking-protection.svg',
      optional_attributes={
        'class': 'mzp-c-split-media-asset'
      }
    ),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-focus-tracking-protection') }}</h3>
    <p>{{ ftl('mobile-focus-firefox-focus-blocks') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img(
      url='img/firefox/browsers/mobile/focus/see-it-all-faster.svg',
      optional_attributes={
        'class': 'mzp-c-split-media-asset'
      }
    ),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-focus-see-it-all') }}</h3>
    <p>{{ ftl('mobile-focus-focus-removes-trackers-v3') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/about-hero-800.png',
      srcset={
        'img/firefox/browsers/mobile/about-hero-500.png': '500w',
        'img/firefox/browsers/mobile/about-hero-800.png': '800w',
        'img/firefox/browsers/mobile/about-hero-1100.png': '1100w'
      },
      sizes={
        '(min-width: 768px)': '760px',
        'default': '250px'
      },
      optional_attributes={
        'class': 'mzp-c-split-media-asset',
        'height': '664',
        'width': '760',
        'loading': 'lazy'
      }
    ),
    block_class='about-mozilla mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-dark',
    media_class='mzp-l-split-media-overflow mzp-l-split-h-center',
    media_after=True,
  ) %}
    <h3>{{ ftl('mobile-focus-made-by-mozilla') }}</h3>
    <p>{{ ftl('mobile-focus-we-believe-everyone') }}</p>
  {% endcall %}

</main>
{% endblock %}

{% block js %}
  {{ js_bundle('firefox-browsers-mobile') }}

  {% if show_firefox_app_store_banner %}
    {{ js_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}
